<template>
  <div class="chat-input-container">
    <div class="input-wrapper">
      <textarea
        ref="textareaRef"
        v-model="inputMessage"
        :placeholder="placeholder"
        class="message-input"
        :class="inputClass"
        @keydown="handleKeydown"
        @input="adjustHeight"
        :disabled="disabled"
        rows="1"
      ></textarea>
      <button
        class="send-button"
        :class="buttonClass"
        @click="handleSend"
        :disabled="!canSend"
      >
        <span v-if="!loading">发送</span>
        <span v-else class="loading-spinner">⏳</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from 'vue';

interface Props {
  theme?: 'love-master' | 'agent';
  placeholder?: string;
  disabled?: boolean;
  loading?: boolean;
}

interface Emits {
  send: [message: string];
}

const props = withDefaults(defineProps<Props>(), {
  theme: 'love-master',
  placeholder: '请输入您的问题...',
  disabled: false,
  loading: false
});

const emit = defineEmits<Emits>();

const inputMessage = ref('');
const textareaRef = ref<HTMLTextAreaElement>();

const inputClass = computed(() => {
  return {
    'input-love-master': props.theme === 'love-master',
    'input-agent': props.theme === 'agent',
    'input-disabled': props.disabled
  };
});

const buttonClass = computed(() => {
  return {
    'button-love-master': props.theme === 'love-master',
    'button-agent': props.theme === 'agent',
    'button-disabled': !canSend.value
  };
});

const canSend = computed(() => {
  return inputMessage.value.trim().length > 0 && !props.disabled && !props.loading;
});

const handleKeydown = (event: KeyboardEvent) => {
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault();
    handleSend();
  }
};

const handleSend = () => {
  if (!canSend.value) return;
  
  const message = inputMessage.value.trim();
  if (message) {
    emit('send', message);
    inputMessage.value = '';
    resetHeight();
  }
};

const adjustHeight = async () => {
  await nextTick();
  if (textareaRef.value) {
    textareaRef.value.style.height = 'auto';
    const scrollHeight = textareaRef.value.scrollHeight;
    const maxHeight = 120; // 最大高度约5行
    textareaRef.value.style.height = Math.min(scrollHeight, maxHeight) + 'px';
  }
};

const resetHeight = async () => {
  await nextTick();
  if (textareaRef.value) {
    textareaRef.value.style.height = 'auto';
  }
};
</script>

<style scoped>
.chat-input-container {
  position: sticky;
  bottom: 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-border-base);
  padding: var(--spacing-4);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
  z-index: 100;
}

.input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-3);
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.message-input {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  padding: var(--spacing-3) var(--spacing-4);
  border: 2px solid var(--color-border-base);
  border-radius: var(--radius-2xl);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  resize: none;
  outline: none;
  transition: var(--transition-base);
  font-family: var(--font-family-base);
  background: var(--color-white);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-normal);
}

.message-input::placeholder {
  color: var(--color-text-placeholder);
  font-weight: var(--font-weight-normal);
}

.message-input:focus {
  border-color: var(--color-love-master);
  box-shadow: 0 0 0 3px var(--color-love-master-light);
  transform: translateY(-1px);
}

.input-love-master:focus {
  border-color: var(--color-love-master);
  box-shadow: 0 0 0 3px var(--color-love-master-light);
}

.input-agent:focus {
  border-color: var(--color-agent);
  box-shadow: 0 0 0 3px var(--color-agent-light);
}

.input-disabled {
  background-color: var(--color-gray-50);
  cursor: not-allowed;
  opacity: 0.6;
  color: var(--color-text-disabled);
}

.send-button {
  min-width: 80px;
  height: 44px;
  background: var(--color-love-master);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-2xl);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  box-shadow: var(--shadow-sm);
}

.send-button:hover:not(.button-disabled) {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.send-button:active:not(.button-disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.button-love-master {
  background: linear-gradient(135deg, var(--color-love-master), var(--color-love-master-dark));
}

.button-love-master:hover:not(.button-disabled) {
  background: linear-gradient(135deg, var(--color-love-master-dark), var(--color-love-master));
}

.button-agent {
  background: linear-gradient(135deg, var(--color-agent), var(--color-agent-dark));
}

.button-agent:hover:not(.button-disabled) {
  background: linear-gradient(135deg, var(--color-agent-dark), var(--color-agent));
}

.button-disabled {
  background: var(--color-gray-300) !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  color: var(--color-text-disabled);
}

.loading-spinner {
  animation: spin 1s linear infinite;
  font-size: var(--font-size-base);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 响应式设计 */
/* 平板端 (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .chat-input-container {
    padding: var(--spacing-3);
  }
  
  .input-wrapper {
    gap: var(--spacing-3);
  }
  
  .message-input {
    font-size: var(--font-size-sm);
    padding: var(--spacing-3);
  }
  
  .send-button {
    min-width: 70px;
    font-size: var(--font-size-sm);
  }
}

/* 手机端 (< 768px) */
@media (max-width: 767px) {
  .chat-input-container {
    padding: var(--spacing-3);
    border-top: 1px solid var(--color-border-light);
  }
  
  .input-wrapper {
    gap: var(--spacing-2);
  }
  
  .message-input {
    font-size: 16px; /* 防止iOS缩放 */
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-xl);
    min-height: 40px;
  }
  
  .send-button {
    min-width: 60px;
    height: 40px;
    font-size: var(--font-size-xs);
    border-radius: var(--radius-xl);
  }
}

/* 小屏手机端 (< 480px) */
@media (max-width: 479px) {
  .chat-input-container {
    padding: var(--spacing-2);
  }
  
  .input-wrapper {
    gap: var(--spacing-2);
  }
  
  .message-input {
    font-size: 16px;
    padding: var(--spacing-2);
    min-height: 36px;
  }
  
  .send-button {
    min-width: 50px;
    height: 36px;
    font-size: 11px;
  }
}

/* 大屏幕优化 (> 1280px) */
@media (min-width: 1280px) {
  .chat-input-container {
    padding: var(--spacing-5);
  }
  
  .input-wrapper {
    gap: var(--spacing-4);
  }
  
  .message-input {
    font-size: var(--font-size-base);
    padding: var(--spacing-4) var(--spacing-5);
    min-height: 48px;
  }
  
  .send-button {
    min-width: 90px;
    height: 48px;
    font-size: var(--font-size-base);
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .send-button:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
  
  .send-button:active:not(.button-disabled) {
    transform: scale(0.95);
  }
  
  .message-input:focus {
    transform: none;
  }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 600px) {
  .chat-input-container {
    padding: var(--spacing-2);
  }
  
  .message-input {
    min-height: 36px;
    max-height: 80px;
  }
  
  .send-button {
    height: 36px;
    min-width: 50px;
  }
}

/* 减少动画效果（用户偏好） */
@media (prefers-reduced-motion: reduce) {
  .message-input:focus {
    transform: none;
  }
  
  .send-button:hover,
  .send-button:active {
    transform: none;
  }
  
  .loading-spinner {
    animation: none;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .message-input {
    border: 3px solid var(--color-border-dark);
  }
  
  .message-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary);
  }
  
  .send-button {
    border: 2px solid var(--color-white);
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .chat-input-container {
    background: var(--color-gray-900);
    border-top-color: var(--color-gray-700);
  }
  
  .message-input {
    background: var(--color-gray-800);
    color: var(--color-gray-100);
    border-color: var(--color-gray-600);
  }
  
  .message-input::placeholder {
    color: var(--color-gray-400);
  }
  
  .message-input:focus {
    border-color: var(--color-primary);
  }
}
</style>